<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>right_fixed</title>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			} 
			
			#rightBox {
				background:  rgba(211, 160, 123, 80);
				position: fixed;
				top: 0;
				width: 200px;
				height: 200px;
				border: 1px solid blue;
				display: none;
			}
			
			#header {
				height:40px;
				background:  rgba(151, 110, 123, 80);
			}
			
			@media screen and (max-width:1024px) {
				#rightBox { display: none; }
			}
			
			@media screen and (min-width:1025px) and (max-width:1280px) {
				#rightBox { width: 250px; display:block; background: yellow; }
			}
			
			
			@media screen and (min-width:1281px) {
				#rightBox { width: 300px; display:block; }
			}
		</style>
		<script type="text/javascript" src="scripts/libs/respond.js"></script>
	</head>

	<body>
		<div id="header">aaa</div>
		<div id="rightBox">
			
		</div>
		
		<div>
			<div>Search</div>
			<div><input type="text" id="search" /></div>
		</div>
		<div id="content">
			
		</div>
		<script type="text/javascript" src="scripts/libs/jquery.js"></script>
		<script type="text/javascript" src="scripts/libs/jquery-ui.js"></script>
		<script type="text/javascript" src="scripts/melon.core.js"></script>
		<script type="text/javascript">
			(function(){
				var $content = $('#content');
				/*
				melon.layout.on('mediaQueryChange', function(e, type, oldType){
					document.title = type;
					$content[0].innerHTML = ['<div>', 'fire `mediaQueryChange` event from body layout: `', oldType, '` to `', type, '`</div>'].join('') + $content[0].innerHTML;
				});
				
				melon.ui.NewsBox.init({
					el: '#rightBox'
				});
				melon.ui.Navigator.init({el: '#header'});
				
				
				$('#search').autocomplete({
					source: 'search.html',
					delay: 400,
					select: function(event, ui) {
						//if (ui.item)
						console.log(ui.item);
					}
				});*/
			})(); 
		</script>
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
	</body>
</html>
